<template>
  <view class="product-card">
    <!-- 产品图片 -->
    <image :src="item.tupian_url[0].url" mode="widthFix" class="product-image"></image>
    
    <!-- 产品信息 -->
    <view class="product-info">
      <!-- 名称+标签 -->
      <view class="title-row">
        <text class="product-name">{{ item.goods_name }}</text>
        <view class="tags">
          <text v-for="(tag, i) in item.tags" :key="i" class="tag">{{ tag }}</text>
        </view>
      </view>
      
      <!-- 销量 -->
      <text class="sold">已售 {{ item.sold }}件</text>
      
      <!-- 价格 -->
      <view class="price-row">
        <text class="current-price">¥{{ item.goods_price }}</text>
        <text class="original-price">¥{{ item.originalPrice }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.product-card {
  padding: 20rpx;
}

.product-image {
  width: 100%;
  border-radius: 8rpx;
}

.product-info {
  padding: 16rpx 0;
}

.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tags {
  margin-left: 20rpx;
}

.tag {
  display: inline-block;
  padding: 4rpx 12rpx;
  background: #ffeceb;
  color: #ff5a5f;
  font-size: 20rpx;
  border-radius: 6rpx;
  margin-left: 8rpx;
}

.sold {
  display: block;
  color: #999;
  font-size: 24rpx;
  margin: 8rpx 0;
}

.price-row {
  display: flex;
  align-items: baseline;
}

.current-price {
  color: #ff5a5f;
  font-size: 32rpx;
  font-weight: bold;
  margin-right: 16rpx;
}

.original-price {
  color: #999;
  font-size: 24rpx;
  text-decoration: line-through;
}
</style>
